<template>
  <div class="inquiry-advices">
    <Button type="primary" icon="el-icon-plus" @click="handleAdd">新增</Button>
    <Table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <TableColumn type="selection" width="48"></TableColumn>
      <TableColumn align="center" label="组号" width="100">
        <template slot-scope="scope">{{ scope.row.groupIndex }}</template>
      </TableColumn>
      <TableColumn align="center" label="名称(规格)" width="140">
        <template slot-scope="scope">{{ scope.row.dragName }}</template>
      </TableColumn>
      <TableColumn align="center" label="天数" width="100">
        <template slot-scope="scope">{{ scope.row.days }}</template>
      </TableColumn>
      <TableColumn align="center" label="数量" width="100">
        <template slot-scope="scope">{{ scope.row.number }}</template>
      </TableColumn>
      <TableColumn align="center" label="单价(元)" width="100">
        <template slot-scope="scope">{{ scope.row.price }}</template>
      </TableColumn>
      <TableColumn align="center" label="操作" width="240">
        <template slot-scope="scope">
          <Button size="small" @click="handleEdit(scope.row)">编辑</Button>
          <Button size="small" type="danger" @click="handleDelete(scope.row)">删除</Button>
        </template>
      </TableColumn>
    </Table>
    <Dialog :title="type==='add'?'新增':'编辑'" :visible.sync="dialogFormVisible">
      <Form :model="formData">
        <FormItem label="组号" :label-width="formLabelWidth">
          <Select v-model="formData.groupIndex" placeholder="请选择组号">
            <Option v-for="item in values" :key="item" :value="item">{{item}}</Option>
          </Select>
        </FormItem>
        <FormItem label="名称(规格)" :label-width="formLabelWidth">
          <Input v-model="formData.dragName" autocomplete="off" />
        </FormItem>
        <FormItem label="天数" :label-width="formLabelWidth">
          <InputNumber :min="1" :max="58" v-model="formData.days" autocomplete="off" />
        </FormItem>
        <FormItem label="数量" :label-width="formLabelWidth">
          <InputNumber :min="1" :max="50" v-model="formData.number" autocomplete="off" />
        </FormItem>
        <FormItem label="服用时间" :label-width="formLabelWidth">
          <CheckboxGroup v-model="formData.times">
            <Checkbox label="早上"></Checkbox>
            <Checkbox label="中午"></Checkbox>
            <Checkbox label="晚上"></Checkbox>
          </CheckboxGroup>
        </FormItem>
        <FormItem label="单价(元)" :label-width="formLabelWidth">
          <InputNumber :min="1" v-model="formData.price" autocomplete="off" />
        </FormItem>
      </Form>
      <div slot="footer" class="dialog-footer">
        <Button @click="dialogFormVisible = false">取 消</Button>
        <Button type="primary" @click="onSave">确 定</Button>
      </div>
    </Dialog>
  </div>
</template>

<script>
import { Button, TableColumn, Table, Input, Form, FormItem, Dialog, Select, Option, Checkbox, CheckboxGroup, InputNumber } from 'element-ui'
export default {
  props: ['inquiryid', 'patientid'],
  components: {
    Button,
    TableColumn,
    Table,
    Form,
    FormItem,
    Dialog,
    Input,
    Option,
    Select,
    InputNumber,
    Checkbox,
    CheckboxGroup
  },
  created() {
    // 请求医嘱数据
  },
  data() {
    return {
      tableData: [
        {
          price: 10,
          number: 10,
          days: 5,
          dragName: 'hh',
          groupIndex: '003',
          times: ['晚上']
        }
      ],
      info: {
        price: 1,
        number: 1,
        days: 1,
        dragName: '',
        groupIndex: '',
        times: ['早上']
      },
      formData: {},
      dialogFormVisible: false,
      formLabelWidth: '120px',
      type: '',
      values: ['001', '002', '003', '004', '005', '006', '007', '008', '009', '010']
    }
  },
  methods: {
    handleSelectionChange(val) {
      console.log(val)
    },
    handleEdit(val) { // 编辑
      this.dialogFormVisible = true;
      this.type = 'edit';
      this.formData = val
    },
    handleDelete(val) { // 删除接口
      console.log(val)
    },
    handleAdd() {
      this.dialogFormVisible = true;
      this.type = 'add';
      this.formData = { ...this.info }
    },
    onSave() {
      if (this.type === 'add') {
        // 调用添加接口
        console.log(this.formData)
        this.dialogFormVisible = false
      } else if (this.type === 'edit') {
        // 调用修改接口
        console.log(this.formData)
        this.dialogFormVisible = false
      }
    }
  }
}
</script>

<style lang="scss">
.el-table {
  margin-top: 20px;
}
</style>
